<template>
    <div>
        <h2>显示</h2>
        标题: <input type="text" v-model="info.name">
        分类: <select v-model="info.Lid">
            <option value="-1">请选择</option>
            <option v-for="item in obj" :value="item.id">{{ item.pname }}</option>
        </select>
        <input type="button" value="查询" @click="show">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>图片</td>
                    <td>活动信息</td>
                    <td>活动状态</td>
                    <td>分类</td>
                    <td>活动时间</td>
                    <td>活动地点</td>
                    <td>更新人</td>
                    <td>最后更新时间</td>
                    <td>操作</td>
                </tr>
                 <tr v-for="item in list">
                    <td><img :src="item.img" width="100px" height="50px"> </td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.state==0?"已结束":"进行中"}}</td>
                    <td>{{ item.pname }}</td>
                    <td>{{ item.date.substr(0,10) }}</td>
                    <td>{{ item.address }}</td>
                    <td>{{ item.people }}</td>
                    <td>{{ item.edate.substr(0,10) }}</td>
                    <td><input type="button" value="修改" class="btn btn-success" @click="jump(item.id) "></td>
                    
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import moment from 'moment';
import { ref,reactive,onMounted } from 'vue';
import  { useRouter,useRoute } from 'vue-router';
const router=useRouter();

let list:any=ref([])
let info:any=reactive({
    name:'',
    Lid:'-1'
})
let obj:any=ref([]);

onMounted(()=>{
    show();
    Bind();
})
const Bind=()=>{
    axios({
        url:'https://localhost:7296/api/Pens/Bind',
        method:'get',
    })
    .then((res)=>{
        obj.value=res.data;
    })
    .catch((err)=>{
        console.log(err)
    })
}

const show=()=>{
    axios({
        url:'https://localhost:7296/api/Pens/Show',
        method:'get',
        params:info
    })
    .then((res)=>{
        list.value=res.data;
    })
    .catch((err)=>{
        console.log(err)
    })
}

const jump=(id:any)=>{
router.push({
    path:'upd',
    query:{
        id:id
    }
})
}

</script>

<style scoped>

</style>